@extends('layouts.app')
@section('title','商品列表')

@section('content')
    <div class="row">
        <div class="card">
            <div class="card-body">
                <!-- 筛选和排序开始 -->
                <form action="{{ route('products.index') }}" class="search-form mb-4">
                    <div class="form-row">
                        <div class="col-md-9">
                            <div class="form-row">
                                <div class="col-auto"><input type="text" class="form-control form-control-sm" name="search" placeholder="搜索"></div>
                                <div class="col-auto"><button class="btn btn-primary btn-sm">搜索</button></div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <select name="order" class="form-control form-control-sm float-right">
                                <option value="">排序方式</option>
                                <option value="price_asc">价格从低到高</option>
                                <option value="price_desc">价格从高到低</option>
                                <option value="sold_count_desc">销量从高到低</option>
                                <option value="sold_count_asc">销量从低到高</option>
                                <option value="rating_desc">评价从高到低</option>
                                <option value="rating_asc">评价从低到高</option>
                            </select>
                        </div>
                    </div>
                </form>
                <!-- 筛选和排序结束 -->
                <div class="row">
                    @foreach($products as $product)
                        <div class="col-md-3 mb-2">
                            <div class="card">
                                <a href="{{ route('products.show', ['product' => $product->id]) }}">
                                    <img src="{{$product->image_url}}" class="card-img-top img-thumbnail" alt="{{$product->title}}">
                                </a>
                                <div class="card-body">
                                    <h5 class="card-title text-danger border-bottom">
                                        ￥
                                        <span class="h2">{{$product->price}}</span>
                                    </h5>
                                    <p class="card-text border-bottom pb-2">
                                        <a href="{{ route('products.show', ['product' => $product->id]) }}" class="text-success">
                                            {{$product->title}}
                                        </a>
                                    </p>
                                    <div class="row">
                                        <span class="text-secondary text-xs col-6 border-right text-center">销量:{{$product->sold_count}}笔</span>
                                        <span class="text-secondary text-xs col-6 text-center">评价:{{$product->review_count}}次</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="float-right">{{ $products->appends($filters)->render() }}</div>
            </div>
        </div>
    </div>
    </div>
@stop
@section('scriptsAfterJs')
    <script>
        let filters = {!! json_encode($filters) !!};
        $(document).ready(function () {
            $('.search-form input[name=search]').val(filters.search);
            $('.search-form select[name=order]').val(filters.order);
        })

        $('.search-form select[name=order]').on('change', function() {
            $('.search-form').submit();
        });
    </script>
@endsection
